<template>
  <div>
    <el-row :gutter="20" style="margin-bottom: 10px;">
      <el-col :span="4">
        <el-select v-model="params.collegeCode" placeholder="请选择学院">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="params.specialtyCode" placeholder="请选择专业">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="params.grade" placeholder="请选择年级">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-col>
      <el-col :span="8">
        <el-select v-model="params.specialtyCode" placeholder="请选择班级">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
        <el-button type="primary" :icon="Search">搜索</el-button>
      </el-col>
    </el-row>
    <el-table :data="students" style="width: 100%" height="65vh">
      <el-table-column prop="sno" label="学号" width="120"/>
      <el-table-column prop="name" label="姓名" width="60"/>
      <el-table-column label="性别" width="60">
        <template #default="scope">{{ scope.row.sex ? '男' : '女' }}</template>
      </el-table-column>
      <el-table-column prop="classes" label="班级" width="120"/>
      <el-table-column prop="grade" label="年级" width="60"/>
      <el-table-column prop="specialty" label="专业" width="160"/>
      <el-table-column prop="college" label="学院" width="120"/>
      <el-table-column prop="province" label="省/直辖市" width="100"/>
      <el-table-column prop="city" label="城市" width="60"/>
      <el-table-column prop="address" label="详细地址" width="180"/>
    </el-table>
    <div class="center">
      <el-pagination background layout="prev, pager, next" :total=15 hide-on-single-page
                     style="margin-top: 5px;"/>
    </div>
  </div>
</template>
<script>
import {Search} from '@element-plus/icons-vue'
import {shallowRef} from "vue";

export default {
  name: 'StudentQuery',
  data() {
    return {
      Search: shallowRef(Search),
      students: [
        {
          sno: '2019001',
          name: 'Tom',
          sex: 0,
          classes: '计算机1班',
          grade: '2016',
          specialty: '计算机科学与技术',
          college: '信息工程学院',
          province: '河北',
          city: '邯郸',
          address: '学院路056000号'
        },
        {
          sno: '2019001',
          name: 'Tom',
          sex: 0,
          classes: '计算机1班',
          grade: '2016',
          specialty: '计算机科学与技术',
          college: '信息工程学院',
          province: '河北',
          city: '邯郸',
          address: '学院路056000号'
        },
        {
          sno: '2019001',
          name: 'Tom',
          sex: 0,
          classes: '计算机1班',
          grade: '2016',
          specialty: '计算机科学与技术',
          college: '信息工程学院',
          province: '河北',
          city: '邯郸',
          address: '学院路056000号'
        },
        {
          sno: '2019001',
          name: 'Tom',
          sex: 0,
          classes: '计算机1班',
          grade: '2016',
          specialty: '计算机科学与技术',
          college: '信息工程学院',
          province: '河北',
          city: '邯郸',
          address: '学院路056000号'
        },
        {
          sno: '2019001',
          name: 'Tom',
          sex: 0,
          classes: '计算机1班',
          grade: '2016',
          specialty: '计算机科学与技术',
          college: '信息工程学院',
          province: '河北',
          city: '邯郸',
          address: '学院路056000号'
        },
        {
          sno: '2019001',
          name: 'Tom',
          sex: 0,
          classes: '计算机1班',
          grade: '2016',
          specialty: '计算机科学与技术',
          college: '信息工程学院',
          province: '河北',
          city: '邯郸',
          address: '学院路056000号'
        },
        {
          sno: '2019001',
          name: 'Tom',
          sex: 0,
          classes: '计算机1班',
          grade: '2016',
          specialty: '计算机科学与技术',
          college: '信息工程学院',
          province: '河北',
          city: '邯郸',
          address: '学院路056000号'
        },
        {
          sno: '2019001',
          name: 'Tom',
          sex: 0,
          classes: '计算机1班',
          grade: '2016',
          specialty: '计算机科学与技术',
          college: '信息工程学院',
          province: '河北',
          city: '邯郸',
          address: '学院路056000号'
        },
        {
          sno: '2019001',
          name: 'Tom',
          sex: 0,
          classes: '计算机1班',
          grade: '2016',
          specialty: '计算机科学与技术',
          college: '信息工程学院',
          province: '河北',
          city: '邯郸',
          address: '学院路056000号'
        },
        {
          sno: '2019001',
          name: 'Tom',
          sex: 0,
          classes: '计算机1班',
          grade: '2016',
          specialty: '计算机科学与技术',
          college: '信息工程学院',
          province: '河北',
          city: '邯郸',
          address: '学院路056000号'
        },
        {
          sno: '2019001',
          name: 'Tom',
          sex: 0,
          classes: '计算机1班',
          grade: '2016',
          specialty: '计算机科学与技术',
          college: '信息工程学院',
          province: '河北',
          city: '邯郸',
          address: '学院路056000号'
        },
        {
          sno: '2019001',
          name: 'Tom',
          sex: 0,
          classes: '计算机1班',
          grade: '2016',
          specialty: '计算机科学与技术',
          college: '信息工程学院',
          province: '河北',
          city: '邯郸',
          address: '学院路056000号'
        },
        {
          sno: '2019001',
          name: 'Tom',
          sex: 0,
          classes: '计算机1班',
          grade: '2016',
          specialty: '计算机科学与技术',
          college: '信息工程学院',
          province: '河北',
          city: '邯郸',
          address: '学院路056000号'
        },
        {
          sno: '2019001',
          name: 'Tom',
          sex: 0,
          classes: '计算机1班',
          grade: '2016',
          specialty: '计算机科学与技术',
          college: '信息工程学院',
          province: '河北',
          city: '邯郸',
          address: '学院路056000号'
        },
      ],
      params: {
        offset: 1,
        limit: 10,
        collegeCode: null,
        specialtyCode: null,
        grade: null
      },
      options: [
        {
          value: 'Option1',
          label: 'Option1',
        },
        {
          value: 'Option2',
          label: 'Option2',
        }],
    }
  },
  computed: {
    counts() {
      return this.students.length
    }
  }
}
</script>
<style>
.center {
  display: flex;
  justify-content: center;
}
</style>